/*
 * @Descripttion: 
 * @version: 
 * @Author: ydj
 * @Date: 2025-04-10 11:23:50
 * @LastEditors: ydj
 * @LastEditTime: 2025-04-10 13:09:41
 */
import React, { useState } from "react";
import { Card, Modal } from 'antd';
import "./style.scss";

interface ICityCardProps {
    cityName: string;
    visitedArr: string[];
    // cityId: number;
}

const CityCard: React.FC<ICityCardProps> = (props) => {
    const { cityName, visitedArr} = props;
    const [isModalOpen, setIsModalOpen] = useState(false);

    // 根据cityId进行加载弹窗
    const handleMore = () => {
        
        setIsModalOpen(true);
    }
    const handleCancel = () => {
        setIsModalOpen(false);
    }

    return (
        <div className="city-card">
            <Card
                title={<span>城市:&nbsp;&nbsp; <span style={{ color: 'blue', fontWeight: 'bold' }}>{cityName}</span></span>}
                extra={<span className="more" onClick={() => handleMore()}>更多</span>}>
                {visitedArr && visitedArr.map((item,index) => {
                    return (<p key={index}>{item}</p>)
                })}
            </Card>
            <Modal title="Basic Modal" open={isModalOpen} onCancel={handleCancel} footer={null}>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </Modal>
        </div>
    );
}
export default CityCard;